//out:article.css
@base:0.01;
body{
    display: flex;
    flex-direction: column;
    height:100vh;
}
.header-wrapper{
    height:@base*40rem;
    line-height: @base*40rem;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    a{
        float: left;
        line-height: @base*40rem;
        color:#333;
        padding-left: @base*10rem;
        text-decoration: none;
    }
}
.container{
    flex:1;
    overflow: auto;
    background: #fff;
    h3{
        font-size: @base*18rem;
        padding:@base*10rem;
    }
    .info{
        padding:0 @base*10rem;
        color:rgba(7,17,27,0.7);
        font-size: @base*12rem;
        time{

            margin-right: @base*10rem;
        }

    }
    .content{
        padding:@base*10rem;
        font-size:@base*18rem;
        color:rgba(7,17,27,0.6);
    }
    .pic{
        width:100%;
        height: @base*240rem;
        margin:@base*10rem 0rem;
        border: none;
        img{
            width:100%;
            height:100%;
            border:none;
        }
    }
}
.footer-wrapper{
    height: @base*60rem;
    display: flex;
    justify-content: space-between;
    .item{
        width:33.3%;
        line-height: @base*60rem;
        text-align: center;
    }
}
